<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-25 17:32:35
 * @LastEditors: 淏
 * @LastEditTime: 2023-11-25 23:19:02
-->
<template>
  <div class="pagination">
    <el-pagination
      background
      small
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="page"
      :page-size="size"
      :page-sizes="[20, 50, 100, 200]"
      :total="total"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'pagination',
    // 组件参数 接收来自父组件的数据
    props: {
      total: {
        type: Number,
        required: true,
        default: 0,
      },
      page: {
        type: Number,
        required: true,
        default: 1,
      },
      size: {
        type: Number,
        required: true,
        default: 20,
      },
    },
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {}
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.$emit('sizeChange', val)
      },
      handlePageChange(val) {
        console.log(`当前页: ${val}`)
        this.$emit('pageChange', val)
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style lang="less" scoped>
  // 分页样式改造
  /deep/ .el-pagination.is-background .btn-prev {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .btn-next {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #409eff;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    background: transparent;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #fff;
  }
</style>
